<template>
  <div class="changDiFenXi">
      <div id="changDiFenXi"></div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2';
import $api from "@/axios/apiConfig"; //接口
import axios from "@/axios"; //请求
export default {
    data(){
        return{
            AnalysisList:[
                // { name: '使用场次', title: '408活动室', value: 1675 ,"使用率": 22,"使用场次":1675,"使用时间":366},
                // { name: '使用场次', title: '408活动室', value: 40,"使用率": 0,"使用场次":40,"使用时间":0},
                // { name: '使用场次', title: '408活动室', value: 1671 ,"使用率": 45,"使用场次":1671,"使用时间":757},

                // { name: '使用时间', title: '511活动室', value: 366 ,"使用率": 22,"使用场次":1675,"使用时间":366},
                // { name: '使用时间', title: '511活动室', value: 0 ,"使用率": 0,"使用场次":40,"使用时间":0},
                // { name: '使用时间', title: '511活动室', value: 757 ,"使用率": 45,"使用场次":1671,"使用时间":757},

                // { name: '使用时间', title: '小剧场', value: 236 ,"使用率": 22,"使用场次":1675,"使用时间":366},
                // { name: '使用时间', title: '小剧场', value: 0 ,"使用率": 0,"使用场次":40,"使用时间":0},
                // { name: '使用时间', title: '小剧场', value: 757 ,"使用率": 45,"使用场次":1671,"使用时间":757},


                // { name: '使用率'},
                // { name: '使用率'},
                // { name: '使用率'},
            ],
            chart:null,
        }
    },
    methods:{
        createChart(){
            const chart = new Chart({
                container: 'changDiFenXi',
                autoFit: true,
                height: 242,
            });
            chart.data(this.AnalysisList);
            chart.scale('使用率', {
                nice: true,
            });
            chart.scale('使用率', {
                ticks: [0, 20, 40, 60, 80],
                formatter: (val) => `${val}%`,
            });
            chart.tooltip({
                showMarkers: false,
                shared: false,
            });
            chart.axis('title',{
                label:{
                    style:{
                        fill:'#fff',
                        fontSize:14,
                    }
                }
            })
            chart.axis('使用率',{
                label:{
                    style:{
                        fill:'#fff'
                    }
                }
            })
            chart.axis('value',{
                label:{
                    style:{
                        fill:'#fff'
                    }
                }
            })
            chart.legend({
                itemName:{
                    style:{
                        fill:'#fff',
                        fontSize:16,
                        lineHeight:18
                    }
                },
                marker:{
                    style:{
                        r:8
                    }
                }
            })
            chart
            .interval()
            .position('title*value')
            .color('name',['#00FFEE','#FFB73B','#FF5DE4'])
            .adjust([
                {
                type: 'dodge',
                marginRatio: 0.6,
                },
            ]).tooltip(false);

            chart.area().position('title*使用率')
            .color('name',['#FF5DE4','#FF5DE4'])
            .shape('smooth').tooltip('参与人数*签到人数*使用率');

            
            chart.line().position('title*使用率')
            .color('name',['#FF5DE4','#FF5DE4'])
            .shape('smooth').tooltip(false);

            
            chart.point().position('title*使用率')
            .color('name',['#FF5DE4','#FF5DE4'])
            .shape('circle').tooltip(false);


            chart.interaction('active-region');
            chart.render();
        },
        //近一周场地使用分析 
        getPlaceBookAnalysisList(){
            axios.get($api.api+'/smart-uttc/place-book/white/getPlaceBookAnalysisList').then(res => {
                    if (res) {
                        res.data.map(item=>{
                            if(item.name== '使用场次'){
                                item.使用场次 = item.value
                            }
                            if(item.name== '使用时间'){
                                item.使用时间 = item.value
                            }
                        })
                        this.AnalysisList = res.data;
                        this.createChart()
                    }
                    
            });
        }
    },
    mounted(){
        this.getPlaceBookAnalysisList();
    }
}
</script>

<style lang="scss" scoped>
.changDiFenXi{
    font-size: 16px;
}
</style>